import React, { Component } from 'react';
import { Dispatch } from 'redux';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Modal,
  Row,
  Col,
  InputNumber,
  Descriptions,
  Input,
  Button,
  Spin,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const FormItem = Form.Item;
const inputStyle = {
  marginRight: '10px',
  width: '85%',
};

const phoneStyle: any = {
  position: 'absolute',
  top: '11px',
  left: '16px',
  width: '100%',
};

const gridArr = [
  {
    index: 1,
    name: '超大格口',
    number: 20,
  },
  {
    index: 2,
    name: '大格口',
    number: 30,
  },
  {
    index: 3,
    name: '中格口',
    number: 10,
  },
  {
    index: 4,
    name: '小格口',
    number: 10,
  },
];
interface CourierInfoProps extends FormComponentProps {
  dispatch?: Dispatch;
  visible: boolean;
  handleType: string;
  changeVisible: (visible: boolean) => void;
}

interface CourierInfoState {
  spinning: boolean;
}

class CourierInfoElem extends Component<CourierInfoProps, CourierInfoState> {
  phone: any = null;

  state: CourierInfoState = {
    spinning: false,
  };

  // 查询手机号
  handleSearch = () => this.setState({ spinning: true });

  // 点击确定
  handleOk = () => {
    const { form: { validateFieldsAndScroll } } = this.props;
    validateFieldsAndScroll((error, values) => {

    });
    this.handleCancel();
  };

  // 关闭
  handleCancel = () => {
    const { changeVisible } = this.props;
    changeVisible(false);
    this.setState({ spinning: false });
  };

  render() {
    const {
      visible,
      handleType,
      form: { getFieldDecorator },
    } = this.props;

    const { spinning } = this.state;

    let params = {};
    if (handleType === '添加') {
      params = {
        title: '添加快递员投递信息',
        okText: '添加',
      };
    } else if (handleType === '编辑') {
      params = {
        title: '编辑快递员投递信息',
        okText: '保存',
      };
    } else if (handleType === '查看') {
      params = {
        title: '查看快递员投递信息',
        footer: null,
      };
    }

    return (
      <Modal
        width={800}
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        {...params}
      >
        {handleType === '添加' && (
          <Row style={{ ...phoneStyle }}>
            <Col span={6}>
              <Input
                placeholder="请输入快递员手机号"
                ref={val => {
                  this.phone = val;
                }}
              />
            </Col>
            <Col span={3} style={{ padding: '0 0 0 20px' }}>
              <Button type="primary" onClick={() => this.handleSearch()}>
                查询
              </Button>
            </Col>
          </Row>
        )}

        <Spin spinning={spinning}>
          <Row gutter={12}>
            <Col md={12} sm={24}>
              <Form className="tableListForms" labelCol={{ span: 7 }}>
                <FormItem label="快递员手机号">---</FormItem>
                {gridArr
                  && gridArr.map(item => (
                    <FormItem label={`${item.name}(${item.number})`} key={item.index}>
                      {handleType !== '查看'
                        && getFieldDecorator(`phone${item.index}`, {
                          rules: [
                            { required: true, message: `【${item.name}】未填写可用格口数量` },
                          ],
                        })(
                          <InputNumber
                            style={inputStyle}
                            min={0}
                            max={item.number}
                            placeholder="请输入快递员投递可用格口数"
                          />,
                        )}
                      {handleType === '查看' && 1122}
                      <span>个</span>
                    </FormItem>
                  ))}
              </Form>
            </Col>

            <Col
              md={12}
              sm={24}
              style={{
                paddingLeft: '25px',
              }}
            >
              <Descriptions title="说明" column={1}>
                <Descriptions.Item>
                  1.每类格口数量最大不能超过该柜体格口类型最大数量；
                </Descriptions.Item>
                <Descriptions.Item>
                  2.每类格口数量最小可配置0，配置0后该快递员在投递小程序端看到空闲格口数量为0；
                </Descriptions.Item>
                <Descriptions.Item>3.“()”内的数字代表该类型格口的总数；</Descriptions.Item>
                <Descriptions.Item>
                  4.未配置的快递员各类型可用格口数=各类型格口总数-已配置某快递员的某类型格口最大数量；
                </Descriptions.Item>
                <Descriptions.Item>5.输入框中所有内容为必填项；</Descriptions.Item>
              </Descriptions>
            </Col>
          </Row>
        </Spin>
      </Modal>
    );
  }
}

export default Form.create<CourierInfoProps>()(CourierInfoElem);
